<template>
	<el-row :gutter="20">
		<el-col :span="12">
			<div class="grid-content bg-purple">
				<div class="top-title">
					<b></b>
					<span class="title money-info">财务数据</span>
					<span class="order-count">本月订单总数：320 本月订单总额：￥630000</span>
					<span class="interval"><a href="">本周</a><i>|</i> <a href="">本月</a></span>
				</div>
				<MoneyData></MoneyData>
			</div>
		</el-col>
		<el-col :span="12">
			<div class="grid-content bg-purple">
				<div class="top-title student-info">
					<b></b>
					<span class="title stu-info">学生信息</span>
				</div>
				<StudentInfo></StudentInfo>
			</div>
		</el-col>
	</el-row>
</template>

<script>
import MoneyData from "./MoneyData.vue";
import StudentInfo from "./StudentInfo.vue";

export default {
	name: "SectionTwo",
	components: {
		MoneyData,
		StudentInfo,
	},
};
</script>

<style lang="less" scoped>
.grid-content {
	height: 325px;
}
.order-count {
	font-size: 12px;
	margin-left: 60px;
	font-weight: bold;
	vertical-align: baseline;
}
.interval {
	font-size: 12px;
	margin-left: 46px;
	a {
		color: #333;
		text-decoration: none;
	}
	i {
		margin: 0 5px;
	}
}
</style>
